<template>
    <div class="left-center-container">
        <!-- 共享换电标题 -->
        <!-- <div class="section-title">共享换电</div> -->

        <!-- 换电柜总量和电池总量 -->
        <div class="stats-row">
            <div class="stat-item">
                <div class="stat-icon">
                    <svg viewBox="0 0 24 24" width="24" height="24">
                        <path fill="#00d4ff" d="M12 2L2 7v10c0 5.55 3.84 9.74 9 11 5.16-1.26 9-5.45 9-11V7l-10-5z" />
                    </svg>
                </div>
                <div class="stat-content">
                    <div class="stat-label">换电柜总量</div>
                    <div class="stat-value">
                        <CountUp :end-val="cabinetTotal" :duration="2" /> <span v-if="cabinetTotal"> 个</span>
                    </div>
                </div>
            </div>

            <div class="stat-item">
                <div class="stat-icon">
                    <svg viewBox="0 0 24 24" width="24" height="24">
                        <path fill="#00d4ff"
                            d="M15.67 4H14V2h-4v2H8.33C7.6 4 7 4.6 7 5.33v15.33C7 21.4 7.6 22 8.33 22h7.33c.74 0 1.34-.6 1.34-1.33V5.33C17 4.6 16.4 4 15.67 4z" />
                    </svg>
                </div>
                <div class="stat-content">
                    <div class="stat-label">电池总量</div>
                    <div class="stat-value">
                        <CountUp :end-val="batteryTotal" :duration="2" /> <span v-if="batteryTotal"> kWh</span>
                    </div>
                </div>
            </div>
            <div class="stat-item">
                <div class="stat-icon">
                    <svg viewBox="0 0 24 24" width="24" height="24">
                        <path fill="#00d4ff" d="M12 2L2 7v10c0 5.55 3.84 9.74 9 11 5.16-1.26 9-5.45 9-11V7l-10-5z" />
                    </svg>
                </div>
                <div class="stat-content">
                    <div class="stat-label">总换电量</div>
                    <div class="stat-value">
                        <CountUp :end-val="totalPower" :duration="2" /> <span v-if="cabinetTotal"> kWh</span>
                    </div>
                </div>
            </div>
            <div class="stat-item">
                <div class="stat-icon">
                    <svg viewBox="0 0 24 24" width="24" height="24">
                        <path fill="#00d4ff" d="M12 2L2 7v10c0 5.55 3.84 9.74 9 11 5.16-1.26 9-5.45 9-11V7l-10-5z" />
                    </svg>
                </div>
                <div class="stat-content">
                    <div class="stat-label">总换电次数</div>
                    <div class="stat-value">
                        <CountUp :end-val="totalTimes" :duration="2" /> <span v-if="totalTimes"> 次</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 换电量总量和换电频次柱状图 -->
        <div class="chart-section" style="height: 480px">
            <!-- <div class="chart-title">换电量总量、换电频次</div> -->
            <div class="chart-container" style="height: 100%;">
                <v-chart class="chart" :option="option" style="width: 100%;height: 100%;"/>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import CountUp from '@/components/count-up'

// 数据定义
const cabinetTotal = ref(0) // 换电柜总量 totalBatterySwap
const batteryTotal = ref(0) // 电池总量 totalBattery
const totalPower = ref(0) // 总换电量 totalElectricitySwap
const totalTimes = ref(0) // 总换电次数 totalBatterySwapTimes
const XData = ref([])
const YData = ref([])


// 柱状图配置
const option = ref({})
const setOption = () => {
    option.value = {
        tooltip: {
            trigger: 'item',
            backgroundColor: 'rgba(0,0,0,0.8)',
            borderColor: 'rgba(147, 235, 248, 0.8)',
            textStyle: {
                color: '#fff'
            },
            formatter: function(params) {
                return params.seriesName + '<br/>' + params.name + ': ' + params.value + '块';
            }
        },
        grid: {
            top: '12%',
            left: '3%',
            right: '3%',
            bottom: '5%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: XData.value,
            axisLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.3)'
                }
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#ffffff',
                fontSize: 12
            }
        },
        yAxis: {
            name: '换电块数/块',
            nameLocation: 'end',
            nameTextStyle: {
                color: '#ffffff',
                fontSize: 12,
            },
            type: 'value',
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#ffffff',
                fontSize: 12
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.1)',
                    type: 'dashed'
                }
            }
        },
        legend: {
            show: true,
            textStyle: {
                color: '#ffffff',
                fontSize: 12
            }
        },
        series: [
            {
                name: '换电块数',
                type: 'bar',
                data: YData.value,
                barWidth: '20px',
                itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: '#7CBDCF'
                            },
                            {
                                offset: 1,
                                color: '#5287DE'
                            }
                        ]
                    },
                    borderRadius: [0, 0, 0, 0]
                }
            }
        ]
    }
}

onMounted(() => {
    // 这里可以添加数据获取逻辑
    let timer = setTimeout(()=>{
        setOption();
        clearTimeout(timer)
    },2000)
})

const getData = (data: any) => {
    console.log(JSON.parse(data))
    let obj = JSON.parse(data)
    cabinetTotal.value = obj.rentalForm.totalBatterySwap
    batteryTotal.value = obj.rentalForm.totalBattery
    totalPower.value = obj.rentalForm.totalElectricitySwap
    totalTimes.value = obj.rentalForm.totalBatterySwapTimes

    XData.value = ['0-3次', '4-7次', '8-12次', '13-15次', '15-18次', '18次以上']
    YData.value = [0, 0, 0, 0, 0, 0]
    obj.sharedSwapForm.forEach((item: any, index: number) => {
        YData.value[index] = Number(item.value)
    })
}

defineExpose({
    getData
})

</script>

<style lang="less" scoped>
.left-center-container {
    width: 100%;
    height: 100%;
    // padding: 20px;
    background: rgba(0, 20, 40, 0.8);
    border-radius: 8px;
    display: flex;
    flex-direction: column;

    .section-title {
        color: #7CBDCF;
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 20px;
        text-align: center;
    }

    .stats-row {
        // display: flex;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px 20px;
        margin-bottom: 10px;

        .stat-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 5px 15px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 8px;
            border: 1px solid rgba(124, 189, 207, 0.3);
            height: 64px;
            .stat-icon {
                width: 40px;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: rgba(0, 212, 255, 0.2);
                border-radius: 50%;

                svg {
                    width: 24px;
                    height: 24px;
                }
            }

            .stat-content {
                flex: 1;

                .stat-label {
                    color: #ffffff;
                    font-size: 12px;
                    margin-bottom: 4px;
                    opacity: 0.8;
                }

                .stat-value {
                    display: flex;
                    color: #00d4ff;
                    font-size: 20px;
                    font-weight: bold;
                    line-height: 1;
                }
            }
        }
    }

    .chart-section {
        // flex: 1;
        width: 100%;
        height: calc(100% - 135px);
        display: flex;
        flex-direction: column;
        
        .chart-title {
            color: #ffffff;
            font-size: 14px;
            margin-bottom: 15px;
            text-align: center;
        }

        .chart-container {
            width: 100%;
            height: 100%;
            // flex: 1;
            // min-height: 200px;

            .chart {
                width: 100%;
                height: 100%;
            }
        }
    }
}
</style>